<template>
  <div class="product-container">
    <div v-for="product in products" :key="product.id" class="product-item" @click="goDetails(product.id)">
      <div class="product-image-div">
        <img :src="product.image" :alt="product.name" class="product-image">
      </div>
      <div class="product-info">
        <h3 class="product-name">{{ product.name }}</h3>
        <p class="product-price">价格: {{ product.price }}元</p>
        <p class="product-description">{{ product.description }}</p>
        <p class="product-category">分类: {{ product.category }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入router用于跳转传递商品id
import { useRouter } from 'vue-router'
const router = useRouter()
// 接收父组件传递的商品数据数组
const props = defineProps({
  products: {
    type: Array,
    required: true
  }
})
// 点击跳转商品详情
const goDetails = (id) => {
  router.push(`/goodsDetails/${id}`)
}
</script>

<style scoped>
.product-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.product-item {
  width: 300px;
  height: 530px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  margin: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-item:hover {
  border: 4px solid red;
}

.product-image-div {
  height: 300px;
  width: 300px;
}

.product-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}

.product-info {
  width: 300px;
  height: 200px;
  text-align: left;
}

.product-name {
  font-size: 1.5em;
  margin-bottom: 5px;
}

.product-price {
  color: #f39c12;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-description {
  color: #666;
  margin-bottom: 5px;
}

.product-category {
  color: #999;
}
</style>